<!-- 预订参数 -->
<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
      :isNeedTree="true"
      :isCheckbox="true"
      @setSelectedNode="setSelectedNode"
      :paramName="paramName"
    ></search-header>
    <div class="common-table-tree-wrapper">
      <div class="common-table-wrapper">
        <multi-fun-table
          :sortColumn="notFormatColumn"
          :orderType="sortType"
          :fixed-cols="fixedCols"
          :is-reset-table="isResetTable"
          :theads-info="theadsInfo"
          :tbodys-info="tbodysInfo"
          @handleMultiCheck="handleMultiCheck"
          @handleSortColumn="handleSortColumn"
          @searchFn="getList"
          @getNextPage="getNextPage"
        >
          <div class="operate-btn-group" slot="operateBtnGroup">
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('MGR:SHARE:BOOKING_RULE:NEW')"
              @click.prevent="createRule()"
            >新增</a>
          </div>
          <template slot="tdCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{scope.$index+1}}</span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>

          <!--操作列内的按钮-->
          <template slot="operateCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              width="88"
              class-name="operateCell"
            >
              <template slot-scope="scope">
                <el-button
                  title="修改"
                  size="small"
                  type="primary"
                  icon="icon-edit"
                  class="ake-icon-font"
                  v-if="isPermmited('MGR:SHARE:BOOKING_RULE:UPDATE')"
                  @click="updateRule(scope.row.id)"
                  plain
                ></el-button>
                <el-button
                  title="删除"
                  size="small"
                  type="danger"
                  icon="icon-delete"
                  class="ake-icon-font"
                  v-if="isPermmited('MGR:SHARE:BOOKING_RULE:DELETE')"
                  @click="showDeleteRule(scope.row.id)"
                  plain
                ></el-button>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>

        <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
      </div>
    </div>

    <basic-modal ref="delConfirmTipModal" bodyTxt="确认删除吗？">
      <h3 slot="title">温馨提示</h3>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text ake_btn_confirm" @click="deleteRule()">确定</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('delConfirmTipModal')">关闭</button>
      </div>
    </basic-modal>

    <basic-modal ref="bookingRuleModal" width="700" static="true">
      <h3 slot="title">预订参数设置</h3>
      <div class="modal-body" slot="modal-body">
        <el-form
          ref="bookingRuleForm"
          :model="bookingRuleVo"
          label-position="left"
          label-width="140px"
          style="width: 500px"
        >
          <el-form-item
            prop="parkId"
            label="停车场"
            :rules="{ required: true, message: '请选择停车场', trigger: 'change' }"
          >
            <!-- <div class="el-form--inline" style="display: flex;">
              <el-button
                size="small"
                type="primary"
                :disabled="isModify"
                @click="openSelectParkModal"
                class="select-park-btn ake_btn_text"
                style="margin-right: 12px"
              >选择停车场</el-button>
              <el-input disabled v-model="bookingRuleVo.parkName"></el-input>
            </div>-->
            <el-select
              v-model="bookingRuleVo.parkId"
              placeholder="请选择停车场"
              popper-class="select-search-filter"
              @change="selectParkSure"
            >
              <el-option
                v-for="pitem in parkingLotList"
                :key="pitem.value"
                :label="pitem.name"
                :value="pitem.value"
              >
                <el-tooltip placement="bottom-start" style="float:left;">
                  <div slot="content">
                    <span>{{ pitem.title }}</span>
                  </div>
                  <span class="grayTip">{{ pitem.topArea }}</span>
                </el-tooltip>
                <p style="float:left;">{{ pitem.name }}</p>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            prop="name"
            label="设置名称"
            :rules="{ required: true, min: 1, max: 20, message: '设置名称须在 1 到 20 个字符', trigger: 'blur' }"
          >
            <el-input v-model="bookingRuleVo.name"></el-input>
          </el-form-item>
          <el-form-item
            prop="availableCount"
            label="可预订数量"
            :rules="{type: 'number', required: true, min: 1, message: '可预订数量至少为1'}"
          >
            <el-input v-model.number="bookingRuleVo.availableCount"></el-input>
          </el-form-item>
          <el-form-item prop="step" label="停车时间步长">
            <el-input-number size="medium" v-model="bookingRuleVo.step" :min="0.5" :step="0.5"></el-input-number>
          </el-form-item>
          <el-form-item
            prop="serviceFee"
            label="预订服务费"
            :rules="{type: 'number', required: true, min: 0.01, max: 999999.99, message: '预订服务费必须大于0'}"
          >
            <el-input v-model.number="bookingRuleVo.serviceFee"></el-input>
          </el-form-item>
          <el-form-item prop="enablePreAmount" label="是否预收停车费">
            <el-switch v-model="bookingRuleVo.enablePreAmount"></el-switch>
          </el-form-item>
          <el-form-item prop="enableRefundServiceFee" label="取消是否退预订费">
            <el-switch v-model="bookingRuleVo.enableRefundServiceFee"></el-switch>
          </el-form-item>
          <el-form-item prop="enableRefundPreAmount" label="取消是否退停车费">
            <el-switch v-model="bookingRuleVo.enableRefundPreAmount"></el-switch>
          </el-form-item>
          <el-form-item
            prop="cancelMinute"
            label="可取消时间（分钟）"
            :rules="{type: 'number', required: true, min: 1, message: '可取消时间至少为1分钟'}"
          >
            <el-input v-model.number="bookingRuleVo.cancelMinute"></el-input>
          </el-form-item>
          <!-- <el-select v-model="bookingRuleVo.bookingType" label="预订类型" placeholder="请选择">
            <el-option label="预订到区域" value="0"></el-option>
          </el-select>-->
          <el-form-item
            prop="vipTypeId"
            label="VIP类型"
            :rules="{ type: 'number', required: true, message: '请选择VIP类型'}"
          >
            <el-select v-model.number="bookingRuleVo.vipTypeId" placeholder="请选择">
              <el-option
                v-for="item in vipTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click.stop="submitBookingRuleForm()"
        >确认</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('bookingRuleModal')">取消</button>
      </div>
    </basic-modal>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";

// image
import images from "@mixins/image.js";

// 引进vue的js
import booking_rule from "./js/booking_rule.js";

export default {
  name: "bookingRule",
  mixins: [common, stardardList, invokeModal, images, booking_rule],
  data() {
    const today = [
      new Date(moment().format("YYYY-MM-DD 00:00:00")),
      new Date(moment().format("YYYY-MM-DD 23:59:59"))
    ];

    return {
      paramName: "parkIds",
      fixedCols: 4,
      total: 0,
      searchList: [
        {
          index: 0,
          isShow: false,
          type: "text",
          name: "createBy",
          text: "创建人",
          value: ""
        },
        {
          index: 1,
          isShow: false,
          type: "datePicker",
          name: "query_time",
          text: "创建时间",
          propName: "createTimeFrom,createTimeTo",
          value: today,
          style: { width: "360px" }
        }
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: 'reno', text: '序号', width: 68 },
        {
          index: 1,
          isShow: false,
          prop: "parkName",
          text: "停车场",
          minWidth: 50
        },
        {
          index: 2,
          isShow: false,
          prop: "name",
          text: "配置名称",
          minWidth: 50
        },
        {
          index: 3,
          isShow: false,
          prop: "availableCount",
          text: "可预订数量",
          minWidth: 50
        },
        {
          index: 4,
          isShow: false,
          prop: "serviceFee",
          text: "预订服务费",
          minWidth: 50
        },
        {
          index: 5,
          isShow: false,
          prop: "enablePreAmountStr",
          text: "是否预收停车费",
          minWidth: 50
        },
        {
          index: 6,
          isShow: false,
          prop: "cancelMinute",
          text: "可取消时间(离预订到达时间)",
          minWidth: 50,
          initHidden: true
        },
        {
          index: 7,
          isShow: false,
          prop: "enableRefundServiceFeeStr",
          text: "取消是否退预订费",
          minWidth: 50,
          initHidden: true
        },
        {
          index: 8,
          isShow: false,
          prop: "enableRefundPreAmountStr",
          text: "取消是否退停车费",
          minWidth: 50,
          initHidden: true
        },
        {
          index: 9,
          isShow: false,
          prop: "step",
          text: "预订步长",
          minWidth: 50
        },
        {
          index: 10,
          isShow: false,
          prop: "bookingTypeStr",
          text: "预订类型",
          minWidth: 70
        },
        {
          index: 11,
          isShow: false,
          prop: "vipName",
          text: "关联内容",
          minWidth: 50,
          initHidden: true
        },
        {
          index: 12,
          isShow: false,
          prop: "createBy",
          text: "创建人",
          minWidth: 50,
          initHidden: true
        },
        {
          index: 13,
          isShow: false,
          prop: "createTime",
          text: "创建时间",
          minWidth: 50,
          initHidden: true
        },
        {
          index: 14,
          isShow: false,
          prop: "updateBy",
          text: "最近修改人",
          minWidth: 50,
          initHidden: true
        },
        {
          index: 15,
          isShow: false,
          prop: "updateTime",
          text: "最近修改时间",
          minWidth: 80,
          initHidden: true
        }
      ],
      tbodysInfo: []
    };
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.el-input-number--medium {
  width: 200px;
  line-height: 28px;
}
</style>
